---
type: tutorial
unitTitle: Создание и развёртывание вашего первого сайта Astro
title: 'Отметка: Модуль 1 - Настройка'
description: >-
  Руководство: Создайте свой первый блог на Astro —

  Подготовьте среду разработки, создайте и разверните свой первый сайт на Astro
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import { Steps } from '@astrojs/starlight/components';

Теперь, когда вы знаете, что будете создавать, пришло время настроить все необходимые инструменты!

В этом модуле мы покажем вам, как настроить среду разработки и развернуть сайт на Netlify. Переходите к [Модулю 2](/ru/tutorial/2-pages/), если вы уже освоились с окружением и рабочим процессом.

:::tip[Использование онлайн-редактора кода]

Хотите пройти этот учебник в онлайн-редакторе кода? Следуйте инструкциям ниже, чтобы начать работу в Google IDX.

<details>
<summary>Использование Google IDX: Следуйте этим инструкциям, а затем переходите непосредственно к Модулю 2!</summary>

**Настройте IDX**

<Steps>
1. Перейдите по внешней ссылке, чтобы [открыть шаблон «Empty Project» в новой рабочей области в IDX](https://astro.new/minimal?on=idx).

2. Следуйте инструкции, чтобы войти в свою учётную запись Google, если вы ещё не авторизовались.

3. Введите имя для вашего проекта, если хотите изменить его по умолчанию с «Empty Project». Нажмите **Создать**.

4. Дождитесь создания рабочей области. Это может занять 30–60 секунд. Если всё пройдет успешно, вы увидите проект Astro, загруженный в онлайн-редакторе кода.

5. Дождитесь, пока IDX запустит два скрипта: один для установки Astro, а другой для запуска сервера разработки. Обратите внимание, что вы можете кратковременно увидеть сообщение о том, что ваша рабочая область «не смогла найти Astro», если она загрузится до завершения установки Astro. Это сообщение можно проигнорировать и закрыть, если оно не исчезнет само.
</Steps>

**Внесите изменения**

Если всё пройдет успешно, вы увидите код файла `src/pages/index.astro`, открытый в разделённом экране вместе с живым предпросмотром веб-сайта. Следуйте инструкции этапа [Напишите свою первую строку в Astro](/ru/tutorial/1-setup/3/), и внесите изменение в этот файл.

**Создайте репозиторий на GitHub**

<Steps>
1. Перейдите к пункту «Source Control» (Управление исходным кодом) в вертикальном меню или откройте его с помощью <kbd>CTRL + SHIFT + G</kbd>.

2. Выберите опцию «Publish to GitHub» (Опубликовать в GitHub). Это создаст новый репозиторий в вашем аккаунте GitHub.
3. Следуйте инструкциям, чтобы войти в свой аккаунт GitHub.
4. После входа вернитесь на вкладку IDX, и вам будет предложено выбрать имя для нового репозитория, а также указать, должен ли он быть приватным или публичным. Для этого руководства вы можете выбрать любое имя и тип репозитория.
5. IDX выполнит начальный коммит и отправит изменения в ваш новый репозиторий GitHub.
6. В дальнейшем, когда у вас появятся изменения, которые нужно закоммитить в GitHub, значок «Source Control» будет отображать число. Это количество файлов, изменённых с момента последнего коммита. Перейдя на эту вкладку и выполнив два шага (коммит и публикация), вы сможете ввести сообщение коммита и обновить репозиторий.
</Steps>

**Разверните ваш сайт**

Если вы хотите развернуть сайт на Netlify, перейдите к этапу Модуля 1 — [Разместите свой сайт в интернете](/ru/tutorial/1-setup/5/).

В противном случае перейдите к [Модулю 2](/ru/tutorial/2-pages/), чтобы начать создавать с Astro!

</details>

{/* Инструкции StackBlitz
<details>
<summary>Использование StackBlitz: Следуйте этим инструкциям, а затем переходите непосредственно к Модулю 2!</summary>

**Настройте StackBlitz**

<Steps>
1. Перейдите по внешней ссылке, чтобы [открыть шаблон «Empty Project» в StackBlitz](https://astro.new/minimal?on=stackblitz).

2. Нажмите «Sign in» (Войти) в правом верхнем углу, чтобы войти, используя свои учётные данные GitHub.

3. В левом верхнем углу окна редактора StackBlitz нажмите «fork» (форк), чтобы сохранить шаблон в своей учётной записи.

4. Дождитесь загрузки проекта, и вы увидите живой предпросмотр стартового проекта «Empty Project».
</Steps>

**Внесите изменения**

На панели файлов вы увидите `src/pages/index.astro`. Нажмите, чтобы открыть его, и следуйте инструкции [Напишите свою первую строку кода на Astro](/ru/tutorial/1-setup/3/), чтобы внести изменения в этот файл.

**Создайте репозиторий на GitHub**

<Steps>
1. Нажмите кнопку <kbd>Connect Repository</kbd> (Подключить репозиторий) в верхней части списка файлов, введите новое имя для вашего репозитория и нажмите <kbd>Create repo & push</kbd> (Создать репозиторий и отправить).

2. Когда у вас появятся изменения, которые нужно закоммитить в GitHub, в верхнем левом углу рабочей области появится кнопка «Commit» (Коммит). Нажав на нее, вы сможете ввести сообщение коммита и обновить репозиторий.
</Steps>

**Разверните свой сайт**

Если вы хотите развернуть сайт на Netlify и иметь опубликованную версию сайта во время работы, перейдите к Модулю 1: [Разместите свой сайт в интернете](/ru/tutorial/1-setup/5/).

В противном случае переходите к [Модулю 2](/ru/tutorial/2-pages/), чтобы начать создавать сайт с Astro!

</details>
*/}
:::

### Что мы сделаем?

В этом модуле вы **создадите новый проект**, который **будет храниться на GitHub** и **подключен к Netlify**.

По мере написания кода вы будете периодически фиксировать свои изменения на GitHub. Netlify будет использовать файлы в вашем репозитории GitHub для создания вашего сайта, а затем опубликует его в интернете по уникальному адресу, где любой желающий сможет его просмотреть.

Каждый раз, когда вы фиксируете изменения на GitHub, в Netlify отправляется уведомление. Затем Netlify автоматически пересоберет и снова опубликует ваш сайт, чтобы отобразить эти изменения.



<Box icon="check-list">
## Контрольный список

<Checklist>
- [ ] Я готов подготовить среду разработки для проекта Astro!
</Checklist>
</Box>
